import React from 'react'
import { createGraphConfig,uuidv4,} from '@antv/xflow'
/** 自定义React节点/边 */
import Node1 from './react-node/node1'
import Node2 from './react-node/node2'
import Edge1 from './react-edge/edge1'
import Edge2 from './react-edge/edge2'

import {addEdge} from './comannd-utils'
// import type {Nilable} from '@antv/x6/lib/types'
import { Cell, Edge, Node, Model } from '@antv/x6/lib/model';
// import type { CellView } from "@antv/x6/lib/view/cell";
import {APP} from './index'

// type Interactable = boolean | ((this: NsGraph, cellView: CellView) => boolean)

export const useGraphConfig = createGraphConfig(config => {
  /** 设置XFlow画布配置项 */
  config.setX6Config({
    /** 画布网格 */
    grid: {
      visible:true,
      type:"mesh"
    },
    /** 画布缩放等级 */
    scaling: {
      min: 0.2,
      max: 3,
    },
    /** 画布滚轮缩放 */
    // mousewheel: {
    //   enabled: true,
    //   /** 将鼠标位置作为中心缩放 */
    //   zoomAtMousePosition: true,
    // },
    // 允许缩放节点
    resizing: true,
    selecting: {
      enabled: true,
      multiple: true,
      selectCellOnMoved: true,
      showNodeSelectionBox: false,
      movable: true,
    },
    history: {
      enabled: true,
    },
    // 节点与边的交互行为
    // interacting:{
    //   magnetConnectable:true,
      
    // },
    // 调整节点旋转角度
    rotating: {
      enabled: true,
    },
    //连线规则
    connecting: {
      snap: true,
      dangling: false,
      highlight: false,
      connectionPoint: 'rect',
      router: { name: 'er' },
      connector: {
        name: 'rounded',
        args: {
          radius: 10,
        },
      },
      // createEdge:function(args):Nilable<Edge> | void {
      //   console.log(args.sourceCell)
      // },
      // validateMagnet:function(arg:any):boolean {
      //   console.log(arg)
      //   return true
      // },
      validateEdge:function(arg) {
        // console.log(arg.edge.store.data.source.cell);
        const edge:any = arg.edge;
        const source = edge.store.data.source.cell;
        const target = edge.store.data.target.cell;
        const edgeConfig = {
          id: uuidv4(),
          source:source,
          target:target,
          renderKey:""
        }
        if(source && target){
          addEdge(APP,edgeConfig)
        }
        return false
      }
    },
  })

  /** 设置XFlow画布需要渲染的React节点/边 */
  config.setNodeRender('NODE1', props => <Node1 {...props} />)
  config.setNodeRender('NODE2', Node2)
  config.setEdgeRender('EDGE1', props => <Edge1 {...props} />)
  config.setEdgeRender('EDGE2', props => <Edge2 {...props} />)
})